<template>
  <div>

	<!-- <myfooter></myfooter> -->
	<myheader></myheader>
	<br><br>
	
	<Breadcrumb :datas="datas"></Breadcrumb>

	<section class="featured-block text-center">
		<div class="container">
			
		
			<div>
			用户名 : <input type="text" v-model="username" />
			</div>

			<br /><br />

			<div>
				密码 : <input type="password" v-model="password" />
			</div>

			<br /><br />
			
			<div>
				验证码：<input type="text" v-model="code" />
			</div>
			<br><br>
			<img :src="src" @click="chageImgCode" />
			<br>

			<Button @click="submit">提交</Button>



			



		</div>
	</section>
	
	
	<footer class="footer">

		<div class="container">
			@v3u.cn
		</div>
		
		
	</footer>
    
  </div>
  
</template>


 
<script>

//组件包含
import myheader from './myheader.vue';
import myfooter from './myfooter.vue';

export default {
  data () {
    return {
	//面包屑导航
   		datas:[{title:'首页',route:{name:'index'}},{title:'注册'}],
		msg: "这是一个变量",
		username:'',
		password:'',
		code:'',
	  	src:"http://localhost:8000/mycode/"
    }
	
  },
  //定义组件
  components:{
	'myheader':myheader
  },
  mounted:function(){

   
  
},
  methods:{
	// 点击刷新验证码
	chageImgCode(){

		// 生成随机字符串
		let num = Math.ceil(Math.random()*10);
		this.src = this.src + "?code=" + num;
	},

	//提交事件
	submit:function(){

		//判断
		if(this.username == ''){

			alert('用户名不能为空');
			return false;
		}

		if(this.password == ''){

		alert('密码不能为空');
		return false;
		}


		//请求后台接口
		this.axios.get('http://localhost:8000/register/',{params:{username:this.username,password:this.password,code:this.code}}).then((result) =>{

			console.log(result);
			this.$Message(result.data.message);

		});


	}
     
  }
}


</script>
 
<style>



</style>